<template>
<div id="dept_box">
  <div id="deptListTable">
    <el-table :data="deptList" style="width: 100%; margin-bottom: 10px" height="800" row-key="id" border default-expand-all>
      <el-table-column fixed type="index" width="80" label="序号" />
      <el-table-column fixed  prop="name" label="部门名称"/>
      <el-table-column prop="leader" label="负责人"/>
      <el-table-column prop="orderNum" label="显示顺序"/>
      <el-table-column prop="visible" label="可见">
        <template #default="scope" >
          <el-tag class="ml-2"  v-if="scope.row.status==='0'">显示</el-tag>
          <el-tag class="ml-2" type="danger"  v-if="scope.row.status==='1'">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期"/>
      <el-table-column label="操作" width="300">
        <template #default="scope" >
          <el-button size="small" type="primary" @click="updateDept(scope.row)">编辑</el-button>
          <el-button size="small" type="warning" @click="addChildDept(scope.row)">新增下属部门</el-button>
          <el-button v-if="scope.row.pid !==0" size="small" type="danger"  @click="deleteDept(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div id="updateDept">
    <el-dialog v-model="updataDeptDialogVisible" width="550" title="修改部门信息">
      <el-form v-model="upDateDept" >
        <el-form-item label="上级部门">
          <el-select v-model="upDateDept.parentId" disabled>
            <el-option :value="upDateDept.parentId"  :label="upDateDept.parentName">{{upDateDept.parentName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input v-model.trim="upDateDept.deptName" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="负责人&nbsp;&nbsp;&nbsp;">
          <el-input v-model.trim="upDateDept.leader" placeholder="请输入负责人"/>
        </el-form-item>
        <el-form-item label="显示顺序">
          <el-input v-model.trim="upDateDept.orderNum" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入显示顺序"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model.trim="upDateDept.phone" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="网络邮箱">
          <el-input v-model.trim="upDateDept.email" placeholder="请输入网络邮箱"/>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-select v-model.trim="upDateDept.status" placeholder="请选择显示状态">
            <el-option value="0" label="显示">显示</el-option>
            <el-option value="1" label="隐藏">隐藏</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="updataDeptDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confrimUpdataDept">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <div id="addChildDept">
    <el-dialog v-model="addDeptDialogVisible" width="550" title="新增下属部门">
      <el-form v-model="addChildDeptInfo" >
        <el-form-item label="上级部门">
          <el-select v-model="addChildDeptInfo.parentId" disabled>
            <el-option :value="addChildDeptInfo.parentId"  :label="addChildDeptInfo.parentName">{{addChildDeptInfo.parentName}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input v-model.trim="addChildDeptInfo.deptName" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="负责人&nbsp;&nbsp;&nbsp;">
          <el-input v-model.trim="addChildDeptInfo.leader" placeholder="请输入负责人"/>
        </el-form-item>
        <el-form-item label="显示顺序">
          <el-input v-model.trim="addChildDeptInfo.orderNum"  oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入显示顺序"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model.trim="addChildDeptInfo.phone" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入联系电话"/>
        </el-form-item>
        <el-form-item label="网络邮箱">
          <el-input v-model.trim="addChildDeptInfo.email" placeholder="请输入网络邮箱"/>
        </el-form-item>
        <el-form-item label="显示状态">
          <el-select v-model="addChildDeptInfo.status" placeholder="请选择显示状态">
            <el-option value="0" label="显示">显示</el-option>
            <el-option value="1" label="隐藏">隐藏</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDeptDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confrimaddDept">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</div>
</template>

<script setup lang="ts">
import {onMounted, ref,reactive} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {getMenuListByUser, selectAllMenu} from "../../api/home";
import router from "../../router";
import {addDept, deleteDeptById, getDeptInfoById, treeData, updateDeptInfo} from "../../api/system";
const deptList = ref([])
const upDateDept = ref({})
const addChildDeptInfo = ref({})
const updataDeptDialogVisible = ref(false)
const addDeptDialogVisible = ref(false)

onMounted(async() => {
  await query();
})
const query = async()=>{
  let res = await treeData(null);
  deptList.value = res.data;
}
const deleteDept = async(row) => {
  ElMessageBox.confirm('确认删除该部门?').then( async () => {
    let res = await deleteDeptById({deptId: row.id});
    if (res.code == 200){
      ElMessage.success(res.msg);
      await query()
    }else{
      ElMessage.error(res.msg);
    }
  })
}
const updateDept = async(row) => {
  upDateDept.value={}
  let res = await getDeptInfoById({deptId: row.id});
  updataDeptDialogVisible.value =true;
  upDateDept.value = res.data;
}
const confrimUpdataDept = async() => {
  let res = await updateDeptInfo(
      {
        deptId: upDateDept.value.deptId,
        parentId: upDateDept.value.parentId,
        deptName: upDateDept.value.deptName,
        leader: upDateDept.value.leader,
        orderNum: upDateDept.value.orderNum,
        phone: upDateDept.value.phone,
        email: upDateDept.value.email,
        status: upDateDept.value.status
      }
  );
  if (res.code == 200){
    ElMessage.success(res.msg);
    await query()
    updataDeptDialogVisible.value = false;
  }else{
    ElMessage.error(res.msg);
  }
}
const addChildDept = async(row) => {
  addDeptDialogVisible.value = true;
  addChildDeptInfo.value={}
  addChildDeptInfo.value.parentId =row.id;
  addChildDeptInfo.value.parentName = row.name;
}
const confrimaddDept = async() => {
  let res = await addDept({
    parentId: addChildDeptInfo.value.parentId,
    deptName: addChildDeptInfo.value.deptName,
    leader: addChildDeptInfo.value.leader,
    orderNum: addChildDeptInfo.value.orderNum,
    phone: addChildDeptInfo.value.phone,
    email: addChildDeptInfo.value.email,
    status: addChildDeptInfo.value.status
  });
  if (res.code ==200){
    ElMessage.success(res.msg);
    await query()
    addDeptDialogVisible.value = false;
  }else {
    ElMessage.error(res.msg);
  }
}


</script>

<style scoped>

</style>
